ספר הבישול של דפי הסגנון

טקסט ודמויות - שימוש במאפיין צף (float) של ה-CSS.

בפרסום המבוסס על הדפסה, זה שכיח שהטקסט זורם מסביב לדמויות. CSS מאפשר לנו לעשות כך עם דפי האינטרנט. בגלרייה אנו ראינו מספר דוגמאות לכך, וכאן נלמד כיצד לנצל את המאפיין הצף של ה-CSS כדי להשיג אפקט זה.

שימו לב, שציפה אינה נתמכת בצורה הכי טובה ברוב הדפדפנים. Internet Explorer 4.5 עבור מקינטוש ו-4.5 ו-5 עבור חלונות, תומכים מספיק טוב כדי להסתמך עליהם, ברוב המקרים, למרות שתצטרכו לבחון אותם באופן יסודי. דפדפנים אחרים יכולים לתמוך מספיק בציפה עבור מצבים פשוטים, אך אל תסתמכו על כך.

ב-HTML שלכם:

אין משהו מיוחד שעלינו לעשות ב-HTML שלנו כדי להשיג אפקט זה. פשוט שימו את ה-HTML עבור הדמות או הדמויות שאתם רוצים שהטקסט יזרום סביבם בפיסקה שאתם רוצים להזרים מסביב לדמות או לדמויות. לדוגמא

<P><img class="left-floating" src="leftimage.gif">הדמות שצפה לצד שמאל היא פשוט חלק של פיסקה זו. היא נוטה יותר לצד שמאל מאשר בשורה עצמה, מכיוון שאנו השתמשנו במאפיין צף של CSS, כדי לציין שהדמות צריכה לצוף מחוץ ולשמאל הפיסקה שבתוכה.</P>

שימו לב שהדמות אינה צריכה להופיע בשום מקום מיוחד בתוך ה-HTML. זה יכול להופיע בהתחלה, בסוף או בכל מקום שהוא בתוך הפיסקה.

בדף הסגנון:

בדף הסגנון שלכם אנו צריכים ליצור הצהרות עבור מעמד צף-שמאל (left-floating) של הדמות. בתוכו אנו רוצים להשתמש במאפיין צף, בכדי לציין שאלמנטים במעמד זה צפים לצד שמאל של הפיסקה שמכילה אותם (או אלמנטים אחרים)

אנו אמורים להכיר כבר את בוררי המעמד, ולא להתקשות בבורר ה-IMG.

IMG.left-floating

כעת כל שעלינו לעשות הוא להוסיף את המאפיין הצף. פשוט.

IMG.left-floating {float: left}

באופן תיאורטי, ציפה יחד עם מאפיין clear יאפשרו לנו ליצור צורות מתוחכמות שעד כה דרשו את השימוש בטבלאות. בתקווה, שבקרוב הדפדפנים העיקריים יתמכו במאפיינים אלה מספיק טוב, ואנו נוכל להיפטר מהמהלומות לתמיד.